<template>
    <div>
        <a-dropdown-button-group :displayCount="2" popPlacement="bottom-end">
            <a-button
                :square="true"
                :color="'error'"
                :loading="loading"
                @click="loading = say('删除')"
            >
                <span class="fa fa-trash"></span>
            </a-button>
            <a-button
                :square="true"
                :color="'primary'"
                :loading="loading"
                @click="loading = say('编辑')"
            >
                <span class="fa fa-edit"></span>
            </a-button>
            <a-button
                :color="'secondary'"
                :loading="loading"
                @click="loading = say('查看SKU列表')"
            >
                查看SKU列表
            </a-button>
            <a-button
                :color="'success'"
                :loading="loading"
                @click="loading = say('新增SKU')"
            >
                新增SKU
            </a-button>

            <template v-slot:moreBtn>
                <a-button :square="true" :color="'error'">
                    <span class="fa fa-ellipsis-h"></span>
                </a-button>
            </template>
        </a-dropdown-button-group>
        <pre
            class="language-html"
        ><code>{{ `<a-dropdown-button-group :displayCount="2" popPlacement="bottom-end">
    <a-button
        :square="true"
        :color="'error'"
        :loading="loading"
        @click="loading = say('删除')"
    >
        <span class="fa fa-trash"></span>
    </a-button>
    <a-button
        :square="true"
        :color="'primary'"
        :loading="loading"
        @click="loading = say('编辑')"
    >
        <span class="fa fa-edit"></span>
    </a-button>
    <a-button
        :color="'secondary'"
        :loading="loading"
        @click="loading = say('查看SKU列表')"
    >
        查看SKU列表
    </a-button>
    <a-button
        :color="'success'"
        :loading="loading"
        @click="loading = say('新增SKU')"
    >
        新增SKU
    </a-button>
    <template v-slot:moreBtn>
        <a-button :square="true" :color="'error'">
            <span class="fa fa-ellipsis-h"></span>
        </a-button>
    </template>
</a-dropdown-button-group>` }}</code></pre>
        <pre class="language-javascript"><code>{{ `import utils from '../../common/utils'
export default {
    data() {
        return {
            loading: false,
        }
    },
    methods: {
        async say(words) {
            await utils.sleep(1000)
            alert(words)
        }
    },
}` }}</code></pre>
        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :headerList="type.headerList"
                :dataList="type.dataList"
            ></a-table>
        </div>
    </div>
</template>

<script>
import utils from '../../common/utils'
export default {
    data() {
        return {
            loading: false,
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'displayCount', remark: '展示出来的按钮的数目，超出的按钮将会收起', type: 'number', default: '0' },
                        { name: 'popPlacement', remark: '下拉框弹出的位置', type: 'top | top-start | top-end | right | right-start | right-end | bottom | bottom-start | bottom-end | left | left-start | left-end', default: 'bottom' },
                        { name: 'trigger', remark: '触发弹框的方式', type: 'click | hover | none', default: 'click' },
                    ],
                }
            ]
        }
    },
    methods: {
        async say(words) {
            await utils.sleep(1000)
            alert(words)
        }
    },
}
</script>